<template>
    <el-card>
      <template #header>
        <div class="header">
          <span>留言管理</span>
        </div>
      </template>
      <el-form class="serch-form">
        <el-form-item>
          <div class="serch-item-userName">
            <el-input
              v-model="serchCondition.userName"
              placeholder="用户名"
              style="width: 200px; margin-right: 20px"
            ></el-input>
            <el-button type="primary" @click="serchUserPage">查询</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table :data="messageBoardPage.records">
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="createdAt" label="创建时间" />
      </el-table>
      <template #footer>
        <div class="pagination">
          <el-pagination
            v-model:current-page="messageBoardPage.current"
            :page-size="messageBoardPage.size"
            :background="true"
            layout="total, prev, pager, next"
            :total="messageBoardPage.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </el-card>
  </template>
  <script setup>
  import { request } from '@/utils/request'
  import { ElMessage } from 'element-plus'
  import { onBeforeMount, ref } from 'vue'
  const serchCondition = ref({
    userName: '',
  })
  const messageBoardPage = ref({
    total: 0,
    size: 10,
    current: 1,
    records: [],
  })
  const requestMessageBoardPage = async () => {
    try {
      let response = await request.get('/api/admin/message-board/page', {
        params: {
          ...serchCondition.value,
          current: messageBoardPage.value.current,
        },
      })
      messageBoardPage.value = response
    } catch (error) {
      console.error(error)
      ElMessage.error('获取用户列表失败')
    }
  }
  onBeforeMount(() => {
    requestMessageBoardPage()
  })
  const serchUserPage = () => {
    requestMessageBoardPage()
  }
  const handleCurrentChange = () => {
    requestMessageBoardPage()
  }
  </script>
  <style scoped lang="scss">
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .serch-form {
    .serch-item-userName {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
